// 标签页点击切换
function initSwitchTab() {
    //1.获取相关元素
    var tabSession = document.querySelector(".table .tab-session");
    var tabFriend = document.querySelector(".table .tab-friend");
    //选择所有列表
    //list[0] 会话列表
    //list[1] 好友列表
    var lists = document.querySelectorAll(".list");
    //2.针对标签页按钮，注册点击事件
    //点击会话按钮，会话按钮背景图颜色切换
    //同时会话列表显示，好友列表隐藏
    tabSession.onclick = function () {
        //设置图标
        tabSession.style.backgroundImage = "url(image/对话1.png)";
        tabFriend.style.backgroundImage = "url(image/好友.png)";
        //会话列表显示，好友列表隐藏
        lists[0].classList = "list";
        lists[1].classList = "list hide";
    };
    //点击好友按钮，好友按钮背景图颜色切换
    //同时好友列表显示，会话列表隐藏
    tabFriend.onclick = function () {
        //设置图标
        tabSession.style.backgroundImage = "url(image/对话.png)";
        tabFriend.style.backgroundImage = "url(image/好友1.png)";
        //好友列表显示，会话列表隐藏
        lists[0].classList = "list hide";
        lists[1].classList = "list";
    };
}
initSwitchTab();

//创建webSocket实例
let webSocket = new WebSocket("ws://127.0.0.1:8080/WebSocketMessage");
//操作 webSocket
webSocket.onopen = function() {
    console.log("webSocket 连接成功！");
}

webSocket.onmessage = function(e) {
    console.log("webSocket 收到消息"+e.data);
    //此时收到的消息是字符串
    let resp = JSON.parse(e.data);
    if(resp.type == 'message') {
        //处理消息
        handleMessage(resp);
    }else{
        //resptype出错
        console.log("resq typr出错");
    }
}

webSocket.onclose = function() {
    console.log("webSocket 关闭连接");
}

webSocket.onerror = function() {
    console.log("webSocket 连接异常");
}


function handleMessage(resp) {
    //客户端消息显示在右侧主消息区域，会话预览区进行展示
    //1.根据响应中的sessionId获取到li标签
    let curSessionLi = findSessionLi(resp.sessionId);
    //如果li标签不存在，则创建一个新的，存在则查找
    if(curSessionLi == null) {
        curSessionLi = document.createElement('li');
        curSessionLi.setAttribute('message-session-id',resp.sessionId);
        curSessionLi.innerHTML = '<h3>' + resp.fromName + '</h3>'
        + '<p></p>';
        //给li加上点击操作
        curSessionLi.onclick = function() {
            clickSession(curSessionLi);
        }

    }
    //2.新消息显示在消息预览区
    let p = curSessionLi.querySelector('p');
    p.innerHTML = resp.content;
    if(p.length > 10) {
        p = p.innerHTML.substring(0,10) + "...";
    }
    //消息太长进行截断
    //3.收到消息的会话显示在会话列表最上方
    let sessionListUL = document.querySelector('#session-list');
    sessionListUL.insertBefore(curSessionLi,sessionListUL.children[0]);
    //4.如果当前收到的消息会话处于选中状态，把当前消息放到消息列表中
    if(curSessionLi.className == 'selected') {
        //把消息列表添加新消息
        let messageShowDiv = document.querySelector('.message-show');
        addMessage(messageShowDiv,resp);
        //滚动到最新消息
        scrollBottom(messageShowDiv);
    }
    //其他操作：背景音乐等
}
function findSessionLi(targetSessionId) {
    //获取所有会话列表li标签
    let sessionLis = document.querySelectorAll('#session-list li');
    for(let li of sessionLis) {
        let sessioId = li.getAttribute('message-session-id');
        if(sessioId == targetSessionId) {
            return li;
        }
    }
    return null;
}


function initSendButton() {
    //1.获取到发送按钮和消息输入框
    let sendButton = document.querySelector(".right .ctrl button");
    let messageInput = document.querySelector(".right .message-input");
    //2.给发送按钮注册一个事件
    sendButton.onclick = function() {
        //针对输入框内容进行简单判定
        if(!messageInput.value) {
            //value的值未null 或者 ''都会触发这个条件
            console("messageInput为空! ")
            return;
        }
        //获取当前选中的li标签的上sessionId
        let selectLi = document.querySelector("#session-list .selected");
        if(selectLi == null) {
            console.log("没有标签被选中！")
            //当前没有li标签被选中
            return;
        }
        let sessionId = selectLi.getAttribute('message-session-id');
        //构造json数据
        let req = {
            type: 'message',
            sessionId: sessionId,
            content: messageInput.value
        }
        req = JSON.stringify(req);
        console.log("[Websocket send]"+req)
        //通过webSocket发送消息
        webSocket.send(req);
        //发送之后，清空之前的消息框
        messageInput.value = "";
    }
}
//初始化点击按钮
initSendButton();

// 获取用户信息
function getUserInfo() {
    $.ajax({
        type: "get",
        url: "/userInfo",
        success: function (body) {
            //从服务器获取数据
            //检验结果是否有效
            if (body.userId && body.userId > 0) {
                //结果有效用户名显示到界面上
                //记录userId到html属性中
                var userDiv = document.querySelector(".main .left .user");
                userDiv.innerHTML = body.username;
                userDiv.setAttribute("usere-id", body.userId);
            } else {
                //结果无效跳转登录页面
                alert("当前用户未登录！");
                location.assign("/login.html");
            }
        },
    })
}
getUserInfo();
// 获取好友列表
function getFriendList() {
    $.ajax({
        type: "get",
        url: "friendList",
        success: function (body) {
            //1.先把之前的好友列表内容清空。
            let friendListUL = document.querySelector("#friend-list");
            friendListUL.innerHTML = "";
            //2.遍历body，把服务器响应结果，加回到当前的friend-list中
            for (let friend of body) {
                let li = document.createElement("li");
                li.innerHTML = "<h4>" + friend.friendName + "</h4>";
                //将friendid记录下来，以备后用
                li.setAttribute("friend-id", friend.friendId);
                friendListUL.appendChild(li);

                //每个li对应界面上好友选项，给li加上点击事件处理
                li.onclick = function() {
                    clickFriend(friend);
                }
            }
        },
        error: function () {
            alert("获取好友列表失败！！！");
        },
    });
}
getFriendList();
// 获取session列表
function getSessionList() {
    $.ajax({
        type: "get",
        url: "/sessionList",
        success: function (body) {
            //1.清空之前的会话列表
            var sessionListUL = document.querySelector("#session-list");
            sessionListUL.innerHTML = "";
            //2.遍历响应数组，构造页面
            for (var session of body) {
                //针对lastmessage很长的情况
                if (session.lastMessage.length > 10) {
                    //拿到前十个汉字
                    session.lastMessage = session.lastMessage.substring(0, 10) +"...";
                }
                var li = document.createElement('li');
                li.setAttribute("message-session-id", session.sessionId);
                li.innerHTML =
                    "<h3>" +session.friends[0].friendName +"</h3>" +
                    "<p>" +session.lastMessage +"</p>";
                sessionListUL.appendChild(li);
                //给li新增点击事件
                li.onclick = function () {
                   clickSession(this);
                }
            }
        },
    });
}


getSessionList();
// 点击li高亮显示
function clickSession(currentli) {
    //设置高亮
    var allLis = document.querySelectorAll("#session-list > li");
    activeSession(allLis, currentli);
    //获取指定会话历史消息
    var sessionId = currentli.getAttribute("message-session-id");
    getHistoryMessage(sessionId);
}
function activeSession(allLis, currentli) {
    // 点击哪个会话，就设置上selected类
    for (var lis of allLis) {
        if (lis == currentli) {
            lis.className = "selected";
        } else {
            // 其他元素取消className
            lis.className = "";
        }
    }
}
// 获取指定会话的历史消息
function getHistoryMessage(sessionId) {
    //先情况右侧列表的消息
    var messageShowDiv = document.querySelector('.message-show');
    messageShowDiv.innerHTML = '';
    //清空小标题
    let tittleDiv = document.querySelector('.tittle');
    tittleDiv.innerHTML = '';
    //设置新的会话标题
    //先找到被选中的会话 selected类
    let selectH3 = document.querySelector('#session-list .selected>h3');
    if(selectH3) {
        //selectH3 可能不存在
        tittleDiv.innerHTML = selectH3.innerHTML;
    }
    //发送ajax请求，获取该会话历史消息
    $.ajax({
        type: 'get',
        url: 'message?sessionId=' + sessionId,
        success: function(body) {
            //此处返回的body，是js数组的每个元素，每个元素都是一条消息
            for(let message of body) {
                addMessage(messageShowDiv,message);
            }
            //加个操作，构造消息列表之后，控制滚动条加载到消息下方
            console.log("消息滚动实现");
            scrollBottom(messageShowDiv)
        }
    });
}

// 消息滚动
function scrollBottom(elem) {
        //获取到可视区域高度
        let clientHeight = elem.offsetHeight;
        //获取内容总高度
        let scrollHeight = elem.scrollHeight;
        //进行滚动操作
        elem.scrollTo(0,scrollHeight - clientHeight);
}

function addMessage(messageShowDiv,message) {
    //使用这个div表示一条消息
    let messageDiv = document.createElement('div');
    //针对当前消息判断是否为自己发的，决定靠左还是靠右
    let selfUsername = document.querySelector('.left .user').innerHTML;
    if(selfUsername == message.fromName) {
        //消息是自己发的
        messageDiv.className = 'message message-right';
    }else{
        //消息是别人发的
        messageDiv.className = 'message message-left';
    }
    messageDiv.innerHTML = '<div class = "box">'
    + '<h4>' + message.fromName + '</h4>'
    + '<p>' + message.content +'</p>'
    + '</div>';
    messageShowDiv.appendChild(messageDiv);
}

//  点击好友列表项
function clickFriend(friend) {
    //1.先判定当前好友是否有对应会话
    //返回值事一个单独的函数实现，找到就返回对应会话列表的li，没找到返回null
    var sessionList = findSessionByName(friend.friendName);
    var sessionListUL = document.querySelector('#session-list');
    if(sessionList) {
        //2.如果存在当前匹配的结果，就把这个会话设置成选中状态，并且置顶
        //将点击的会话元素插入到最前面
        sessionListUL.insertBefore(sessionList, sessionListUL.children[0]);
        //模拟点击sessionLi也可以直接设置
        //sessionList.click()
        //设置选中状态在clickSession中已经实现
        clickSession(sessionListUL.children[0]);
    }else {
        //3.如果不存在匹配的结果，就创建新会话（创建li标签 + 通知服务器）
        sessionList = document.createElement('li');
        //构造具体li内容
        sessionList.innerHTML = '<h3>' + friend.friendName + '</h3>' + '<p></p>';
        //把标签置顶
        sessionListUL.insertBefore(sessionList,sessionListUL.children[0]);
        sessionList.onclick = function() {
            clickSession(sessionList);
        }
        sessionList.click();
        // 发送消息给服务器，告诉服务器消息会话是啥样的
        console.log("frinendId: "+friend.friendId)
        createSession(friend.friendId, sessionList);
    }

    //4.标签切换到会话列表
    //找到会话列表标签页，模拟点击操作
    var tabSession = document.querySelector('.table .tab-session');
    tabSession.click();

}
function findSessionByName(userName) {
    //获取会话列表所有li标签
    var sessionLists = document.querySelectorAll('#session-list>li');
    //依次遍历，找到li标签中名字一样的属性
    for(var sessionLi of sessionLists) {
        //获取li的h3标签，进一步得到名字
        var h3 = sessionLi.querySelector('h3');
        if(h3.innerHTML == userName) {
            return sessionLi;
        }
    }
    return null;
}
//告诉服务器会话和谁进行
function createSession(friendId, sessionList) {
        $.ajax({
            type:'post',
            url:'session?toUserId='+ friendId,
            success: function(body) {
                console.log("会话创建成功! sessionId = " + body.sessionId);
                sessionList.setAttribute('message-session-id',body.sessionId);
            },
            error: function() {
                console.log('会话创建失败');
            }
        });
}
